import React, { Component } from 'react'

export default class App extends Component {
    state = {
        list: ['1', '2', '3', '4', '5'],
    }
    myref = React.createRef()
    render() {
        return (
            <div>
                <input ref={this.myref} />
                <button onClick={this.handleClickadd}>添加</button>
                <ul>
                    {
                        this.state.list.map((item, index) => <li key={index}>
                            {/* 富文本展示 */}
                            <span dangerouslySetInnerHTML={{
                                __html: item
                            }}></span>
                            {/* <button onClick={this.handleClickdel.bind(this,'11')}>删除</button> */}
                            <button onClick={() => {
                                this.handleClickdel(index)
                            }}>删除</button>
                        </li>)
                    }
                </ul>
                {this.state.list.length === 0 ? <div>删光了</div> : null}
                {this.state.list.length === 0 && <div>控制js显示</div>}

                <div className={this.state.list.length === 0 ? '' : 'show'}>css显示</div>
            </div>
        )
    }

    handleClickadd = () => {
        console.log('click', this.myref.current.value)
        let newlist = [...this.state.list]
        newlist.push(this.myref.current.value)
        this.setState({ list: newlist })
        //TODO:直接改变状态。不推荐
        /* this.state.list.push(this.myref.current.value)
        this.setState({
            list: this.state.list
        }) */
        //清空输入框
        this.myref.current.value = ""
    }

    handleClickdel = (index) => {
        console.log('handleClickdel', index)
        let newlist = this.state.list.concat()
        newlist.splice(index, 1)
        this.setState({
            list: newlist
        })
    }
}
